react native 手势响应
参考地址：https://www.jianshu.com/p/935e5c6a5064官方文档地址：https://facebook.github.io/react-native/docs/panresponder.html官方翻译地址：https://reactnative.cn/docs/0.50/panresponder.html首先，通过react native引入PanResponderimport {PanResponder} from 'react-native'; //这里是当移动了超过2...
2024-01-10
react native中遇到的问题
1，今天用vscode在写react native项目时发现编辑器里面报错后来查了好久发现原因：最新的react已经支持typescript的语法和类型检测，所以有这种写法，但是vscode编辑器不支持在babel里有typescript的语法，所以会有警示，通过vscode编辑器忽略就ok...
2024-01-10
react native 实现拖拽排序
先上效果图，意思意思。其实原理很简单，没有想的那么难。大家在改造的时候，请注意 this.offset 的值，因为它关系到查找目标box的index（原理：手势释放时，所在的坐标值来推算出目标box的Index），本文代码可读性还...
2024-01-10
react native 学习笔记13
1.今天学习定义页面，效果如下：定义的页面最上面一个没有顶上去，还需要修改页面修改searchbar：marginTop：Platfrom.OS==='ios'?20:0 说明：Ios上边为20，而android=0；2.建搜索框3.学习滚动页面上面的广告3个页面，小而且，不好看，一般用户就看一个大的广告，所以还需要修改界面需要让广告动起来...
2024-01-10
react native 常用第三方库
React-native-animatable 动画react-native-carousel 轮播react-native-countdown 倒计时react-native-device-info 设备信息react-native-fileupload 文件上传react-native-icons 图标react-native-image-picker 图片选择器react-native-keychain iOS KeyChain管理react-native-picker滚轮选择器react-nativ...
2024-01-10
react-native 中样式的骚写法
今天在读人家源码时发现了一个rn样式的骚写法：import { StyleSheet, Platform,} from 'react-native';const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#eee', ...Platform.select({ ios: { ...
2024-01-10
react native 之 获取键盘高度
多说不如多撸:/** * Created by shaotingzhou on 2017/2/23. *//** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View, Keyboard, TextI...
2024-01-10
react native 混合开发代码示例
ReactNativeModuleProjectreact native project for hybrrd app，自己做的一个混合开发研究，个人觉得相对于其他混合开发框架来说，有很大优势，不用学习复杂的js语法， 并且对更接近原生，能够保证运行更加流畅和风格统一，同时它的语法和控件也更加容易理解，上手较快。也可以和原生应用混合开发，互相调...
2024-01-10
初学：react-native 轮播图
参考资料：http://reactscript.com/react-native-card-carousel-component/import React, {Component} from 'react';import { StyleSheet, Text, Image, View} from 'react-native';import CarouselCard from '../carouselCard/Card';import Carousel, {Pagination} fr...
2024-01-10
react native社区项目知识点
前言本来想的上一个React项目做完，从容过完1月迎接新年，IT行业的快节奏真是不容许有这种想法；公司把3月上线的react native项目，时间周期活生生压缩到1月底，真是哭笑不得。这样只能加加班而且保质保量地完成，还是在接口各种报错的前提下利用Mock数据。 言归正传，回到react native项目中来xcode...
2024-01-10
react-native 关闭黄屏警告
将代码放在index.js 中 AppRegistry.registerComponent('App', () => App)之前 //关闭其中某些yellow警告console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please use BackHandler instead.','source.uri should not be an empty string','Invalid props.style key']; // 关...
2024-01-10
React-native项目构建中的坑
2019独角兽企业重金招聘Python工程师标准>>> 从12月24日开始搭建React-native项目，期间构建项目 一直报错，Build failed with an execption，顺便帮贴一下收益良多的帖子 ，有需要的同学可以查看。好了 进入重点----------------------来一条华丽的分割线-------------------------------当项目一切都OK 进入到 react-native run-a...
2024-01-10
react-native个人挖坑避雷指南
本文为个人react-native学习应用过程中遇到的坑，总结自用，仅供参考。1.替换APP.js会遇到下图问题(暂未解决)错误翻译：无法连接到开发服务器。尝试以下解决问题：确认包服务器运行确认你的设备或者模拟器连接着电脑，且手机启动USB调试模式，在cmd中运行adb devices来查看已经连接好的设备列表...
2024-01-10
react-native环境搭建注意事项
注意：此为个人经验，请依据自身项目情况，酌情参考请严格参照react-native中文网的搭建开发环境文档进行操作。安装Java的jdk并配置相关环境变量。安装Android-studio，安装时会自动安装安卓开发所需的sdk。以上依据文档要求，下载相应版本，并配置好后，我们来初始化react-native项目。3.1. 使用nr...
2024-01-10
利用react-native构建一个新项目
开发环境：Mac OS,已安装Xcode1、全局安装react-native输入命令：npm install -g [email protected]2、安装好之后在你想要建立项目的路径下初始化一个项目输入命令：react-native init *** --version 0.44.3（***为想要创建的项目名称,这里初始化项目时最好指定版本，否则有可能会运行报错。我在构建项目的时候就踩了这...
2024-01-10
浅谈react中的immutable
immutable不可变对象介绍一下基本概念：facebook工程师历时三年时间打造，与react同期出现，但是没有被默认放到React工具集中，它内部实现了一套完整的数据持久化，里面有很多常见的数据类型 Collection List Map Set等。里面有三种重要的数据解构:Map:键值对集合，对应Object ES6中也有专门的Map对象List:有...
2024-01-10
React中使用Ant Table组件
一、Ant Design of React http://ant.design/docs/react/introduce二、建立webpack工程 webpack+react demo下载 项目的启动，参考三、简单配置 1.工程下载下来之后，在src目录下新建目录“table”，新建app.js，内容如下。import React from 'react';import ReactDOM from 'react-dom';import ExampleTable from './Example...
2024-01-10如何在react-native中缩小WebView？
我在react-native中使用“ WebView”来呈现网页。该网页没有适合移动设备的用户界面。当我在Chrome浏览器中打开它时，如下图所示。 但是，当我渲染下面的代码时，它看起来像下面的图像。请参阅我已经尝试了不同的道具automaticallyAdjustContentInsets ={false}，scalesPageToFit={false}。但这并没有给我欲望输出。ren...
2024-01-10
用 `react native` 模仿做的一个美团客户端首页
一开始让我开发ios我是拒绝的，因为看到oc的语法，略感蛋疼，实在是不想套进去，可能苹果也意识到了这个问题，所以推出了swift，我研究了一下，感觉这才像是编程语言，起码人性化多了，但是Xcode代码补全弱爆了，可能是idea用惯了，xcode真心不习惯了，装了插件也感觉好弱，折腾没多久，就搁置了...
2024-01-10
图解React SSR中的hydrate
React CSR：水车模型当初在理解 React CSR 时做过一个比喻，把单向数据流比作瀑布模型：瀑布模型：由props（水管）和state（水源）把组件组织起来，组件间数据流向类似于瀑布。数据流向总是从祖先到子孙（从根到叶子），不会逆流（摘自深入 React）单组件的微观视角下，我们把props理解为水管（数...
2024-01-10
react-native 学习之TextInput组件篇
1 /** 2 * Sample React Native App 3 * https://github.com/facebook/react-native 4 */ 5 'use strict'; 6 import React, { 7 AppRegistry, 8 Component, 9 StyleSheet, 10 Text, 11 View, 12 Image, 13 TextInput 14 } from 'react-native'; 15...
2024-01-10
react中tab选项卡切换
直接上代码 不用的组件可以删了import React from 'react';import { NavLink} from "react-router-dom";import Otherbanner from '../otherbanner/index.js';import Header from '../../header/index.js';import Footer from '../../footer/index.js';class Index extends React.Componen...
2024-01-10
1、react-native中expo的真机测试字体不加载的坑
native-base的字体问题Roboto_medium把native-base中的Fonts文件夹放到项目的根目录.import {Font,AppLoading} from 'expo';import {Root} from 'native-base';export default class App extends React.Component { constructor(){ super(); this.state={ loading:true } } asyn...
2024-01-10
react native 学习之模仿”探探“实现豆瓣电影app部分功能
一、 首先配置环境 当然是node 下用npm npm install -g react-native-cli然后创建项目react-native init react1cd react1react-native run-android新开一个cmd 启动项目react-native start 在电脑上启动的安卓虚拟机 不能摇一摇，所以还需要在 cmd 里输入 adb shell input keyevent 82或者adb -s emulator-5554 shell input keyevent...
2024-01-10
Taro React 小知识总结
最近在学习Taro框架开发小程序和h5，采用react/less语言来开发，涉及到的一些小知识将会在这里总结一下，方便以后查验环境判断process.env.TARO_ENVh5 taro-ui需要单独配置项h5: {exnextModules: ['taro-ui']}多环境打包outputRoot: dist/${process.env.TARO_ENV},import { getCurrentInstance } from '@tarojs/taro'路由传参 通过getCurrentIns...
2024-01-10
